import React from "react";
import { AMAZON_URL } from "../api/query";

import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  Dimensions,
} from "react-native";

const dimen = Dimensions.get("window");
const width = dimen.width;

const ShowList = ({ onQuery, showData }) => {
  // console.log("展示", showData);
  return (
    <View style={styles.borderView}>
      <TouchableOpacity onPress={onQuery} style={styles.btnStyle}>
        <View style={styles.itemView}>
          <View style={{ flex: 3 }}>
            {/* <Image
              style={styles.imageStyle}
              source={require("../../assets/image.png")}
            /> */}
            <Image
              style={styles.imageStyle}
              source={{ uri: AMAZON_URL + "/" + showData.image[0] }}
            />
          </View>
          <View
            style={{
              flex: 5,
              marginTop: 2,
              justifyContent: "center",
              paddingLeft: 5,
            }}
          >
            <Text style={styles.itemTitle}>{showData.title}</Text>
            <Text style={styles.itemCompany}>{showData.company}</Text>
          </View>
          <View style={styles.priceView}>
            <Text style={styles.itemPrice}>
              {(showData.price / 1000).toFixed(2)}K/件
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  borderView: {
    padding: 8,
    paddingLeft: "5%",
    paddingRight: "5%",
    justifyContent: "center",
  },
  imageStyle: {
    margin: 8,
    width: 60,
    height: 60,
    borderRadius: 6,
    // marginLeft: 19,
    // marginTop: 15,
    // marginBottom: 10,
    // borderRadius: 8,
  },
  btnStyle: {
    width: width * 0.9,
    // height: 230,
    backgroundColor: "#FFF",
    borderColor: "#666",
    // borderWidth: 1,
    borderRadius: 8,

    elevation: 6,
    shadowOffset: {
      width: 2,
      height: 0,
    },
    shadowColor: "#555",
    shadowRadius: 40,
    shadowOpacity: 0.1,
  },
  itemView: {
    flexDirection: "row",
  },
  itemTitle: {
    fontSize: 14,
    fontWeight: "bold",
    padding: 5,
    // marginTop: 5,
    // marginLeft: 10,
  },
  priceView: {
    // backgroundColor: "yellow",
    flex: 5,
    flexDirection: "row-reverse",
    alignContent: "center",
    alignItems: "center",
    marginTop: 17,
  },
  itemPrice: {
    fontSize: 16,
    fontWeight: "bold",
    color: "red",
    // marginTop: 7,
    marginRight: 10,
    // marginLeft: 10,
  },
  itemCompany: {
    fontSize: 12,
    color: "#777",
    // marginTop: 7,
    padding: 5,
    marginBottom: 7,
    // marginLeft: 5,
  },
});

export default ShowList;

// import React from "react";

// import { StyleSheet, Text, View, TouchableOpacity, Image } from "react-native";

// const ShowList = ({ onQuery, showData }) => {
//   return (
//     <View style={styles.borderView}>
//       <TouchableOpacity onPress={onQuery} style={styles.btnStyle}>
//         <View style={styles.itemView}>
//           <Image
//             style={styles.imageStyle}
//             source={require("../../assets/image.png")}
//           />
//           <View style={{ alignItems: "center" }}>
//             <Text style={styles.itemTitle}>{showData.title}</Text>
//             <Text style={styles.itemPrice}>￥{showData.price}/件</Text>
//             <Text style={styles.itemCompany}>{showData.company}</Text>
//           </View>
//         </View>
//       </TouchableOpacity>
//     </View>
//   );
// };

// const styles = StyleSheet.create({
//   borderView: {
//     padding: 8,
//   },
//   imageStyle: {
//     width: 120,
//     height: 120,
//     marginLeft: 19,
//     marginTop: 15,
//     marginBottom: 10,
//     // borderRadius: 8,
//   },
//   btnStyle: {
//     // height: 80,
//     width: 158,
//     height: 230,
//     backgroundColor: "#FFF",
//     borderColor: "#666",
//     // borderWidth: 1,
//     borderRadius: 8,

//     elevation: 6,
//     shadowOffset: {
//       width: 2,
//       height: 0,
//     },
//     shadowColor: "#555",
//     shadowRadius: 40,
//     shadowOpacity: 0.1,
//   },
//   itemView: {
//     height: 150,
//     flexDirection: "column",
//   },
//   itemTitle: {
//     fontSize: 14,
//     fontWeight: "bold",
//     marginTop: 5,
//     // marginLeft: 10,
//   },
//   itemPrice: {
//     fontSize: 13,
//     fontWeight: "bold",
//     color: "red",
//     marginTop: 7,
//     // marginLeft: 10,
//   },
//   itemCompany: {
//     fontSize: 12,
//     color: "#777",
//     marginTop: 7,
//     // marginLeft: 5,
//   },
// });

// export default ShowList;
